<template>
  <div id="box" class="flex-col">
    <dl v-if="topList.length > 0" class="flex-row">
      <dt>{{ getLevelName(children[0] && children[0].level ? children[0].level : 1)  }}级分类：</dt>
      <div class="fill-width">
        <dd v-for="(item, index) in topList" @click="clickItem(item, list)" :class="{'active': item.selected}" :key="index">
          {{ item.label }}
        </dd>
      </div>
    </dl>
    <dl v-if="children.length > 0" class="flex-row">
      <dt>{{ getLevelName(children[0] && children[0].level ? children[0].level : 1) }}级分类：</dt>
      <div class="fill-width">
        <dd v-for="(item, index) in children" @click="clickChilrenItem(item,children)" :key="index" :class="{'active': item.selected}">
          {{ item.label }}
        </dd>
      </div>
    </dl>
    <Item ref="itemRef" :list="otherList" v-if="otherList.length > 0" v-model="itemSelectedObjs" @itemClick="(item,list) => $emit('itemClick',item,list )"/>
  </div>
</template>

<script>
import Item from './item.vue'
export default {
  name: 'Item',
  components: {
    Item
  },
  props: {
    list: {},
    value: {},
    selectedObjList: []
  },
  data() {
    return {
      topList: [],
      children: [],
      otherList: [],
      allSelectedObjs: [],
      selectedObjs: [],
      itemSelectedObjs: [],
    }
  },
  watch: {
    list: {
      handler(val){
        this.topList = val
      },
      deep: true,
      immediate: true
    },
    itemSelectedObjs: {
      handler(val){
        if(val && val.length > 0)
          this.allSelectedObjs = this.selectedObjs.concat(val)
          this.$emit('input', this.allSelectedObjs)
      },
      deep: true,
      immediate: true
    },
    selectedObjs: {
      handler(val){
        this.allSelectedObjs = val
        this.$emit('input', this.allSelectedObjs)
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    clickItem(item, list){
      list.forEach(it =>  this.$set(it,'selected',false))
      this.$set(item,'selected',true)
      this.children = item.children || []
      this.resetUnSelect(list,true)
      this.reset(1)
      // this.getSelectedIds()
      this.getSelectedObjs()

      this.$nextTick(() => {
        this.$emit('itemClick',item, list)
      })
    },
    clickChilrenItem(item, list){
      list.forEach(it => {  this.$set(it,'selected',false) })
      this.$set(item,'selected',true)
      this.otherList = item.children || []
      this.otherList?.forEach(it => {
        this.$set(it,'selected',false)
      })

      this.resetUnSelect(list,true)
      this.reset(2)
      // this.getSelectedIds()
      this.getSelectedObjs()
      this.$nextTick(() => {
        this.$emit('itemClick',item, list)
      })
    },
    getSelectedObjs(){
      const selectedIdsObj = []
      const topSelect = this.topList.find(item => item.selected)
      const towSelect = this.children.find(item => item.selected)
      const threeSelect = this.otherList.find(item => item.selected)
      if(topSelect){
        selectedIdsObj.push(topSelect)
      }
      if(towSelect){
        selectedIdsObj.push(towSelect)
      }
      if(threeSelect){
        selectedIdsObj.push(threeSelect)
      }
      this.selectedObjs = selectedIdsObj
      return selectedIdsObj
    },
    reset(level){
      if(level === 1){
        this.otherList = []
      }
      if(level === 2){
        this.$refs?.itemRef?.reset()
      }
    },
    resetUnSelect(list,isTop){
      list.forEach(it => {
        if(!isTop){
          this.$set(it,'selected',false)
        }
        if(it.children){
          this.resetUnSelect(it.children)
        }
      })
    },
    getLevelName(levelNum){
      const numMap = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '七',
        8: '八',
        9: '九',
        10: '十',
      }
      return numMap[levelNum]
    },

  },
  mounted() {

  }
}
</script>

<style scoped lang="scss">
#box {
  background: rgba(255, 255, 255, 0.8);

  dl, dd {
    margin: 0;
  }

  dl {
    //line-height: 30px;
    //height: 30px;
    border-bottom: 1px dashed #dadada;
    margin: 0 20px;
  }

  dt {
    color: #8a8a8a;
    min-width: 90px;
  }

  dd {
    float: left;
    color: #252525;
    margin: 0 10px;
    font-size: 14px;
    cursor: pointer;
    line-height: 30px;
    height: 30px;
  }

  dd.active {
    color: #3f9eff;
    font-weight: bold;
  }

}


</style>
